<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" class="handle-del mr10" @click="setGroup" size="small">新增模块</el-button>
        <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
        <el-button type="primary" @click="handleSearch" size="small">搜索</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="handleSelectionChange">
        <el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="roleid" label="角色编号" align="center"></el-table-column>
        <el-table-column prop="rolename" label="角色名" align="center"></el-table-column>
        <el-table-column prop="details" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 新增分组弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="addVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="form" border :model="addForm" label-width="70px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="角色名称">
              <el-input placeholder="请输入名称" v-model="addForm.rolename"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="addForm.details"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="模块目录">
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><br/>
              <el-checkbox-group v-model="checkedMenus" @change="handleCheckedMenusChange">
                <el-checkbox v-for="menu in menus" :label="menu.menuid" :key="menu.menuid">{{ menu.menunm }}</el-checkbox>
              </el-checkbox-group>  
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let modelmenu = [
          { menuid: "111",menunm: "首頁" },
          { menuid: "112",menunm: "商品管理" },
          { menuid: "113",menunm: "员工管理" },
          { menuid: "114",menunm: "分组管理" }];
export default {
  data() {
    return {
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      dialogTitle: "",
      addVisible: false,
      pageTotal: 0,
      addForm: {
        rolename: "",
        details: ""
      },
      idx: -1,
      id: -1,
      checkAll: false,
      menus: modelmenu,
      checkedMenus: [],
      isIndeterminate: false
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let res = {
        list: [
          {
            id: 1,
            roleid: "001",
            rolename: "张三",
            details: "广东省东莞市长安镇"
          },
          {
            id: 2,
            roleid: "002",
            rolename: "李四",
            details: "广东省广州市白云区"
          },
          {
            id: 3,
            roleid: "003",
            rolename: "王五",
            details: "湖南省长沙市"
          },
          {
            id: 4,
            roleid: "004",
            rolename: "赵六",
            details: "福建省厦门市鼓浪屿"
          }
        ],
        pageTotal: 4
      };
      console.log(res);
      this.tableData = res.list;
      this.pageTotal = res.pageTotal || 50;
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      console.log(row);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      }).then(() => {
        this.$message.success("删除成功");
        this.tableData.splice(index, 1);
      })
      .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //打开新增角色的弹框
    setGroup() {
      this.dialogTitle = "新增角色";
      this.addVisible = true;
      //const url = "http://172.16.6.121:8080/gold/HeadQuarters/findAll";
      this.$axios.post(this.$api.user.findAll, {})
      .then(res => {
        console.log("aa__"+JSON.stringify(res));
      })
      .catch(err => {
        console.log(err);
      });
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.addForm = row;
      this.dialogTitle = "编辑权限";
      this.addVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    handleCheckAllChange(val) {
      if(val){
        this.checkedMenus = this.menus;
        this.checkAll = true;
        console.log(val+"__aa__"+this.checkedMenus);
      }else{
        this.checkedMenus = [];
        this.checkAll = false;
        console.log(val+"__bb__"+this.checkedMenus);
      }
    },
    handleCheckedMenusChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.menus.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.menus.length;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>